<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>报销流程管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .list-header {
            padding: 15px;
            background: #f8f8f8;
            border-bottom: 2px solid #e6e6e6;
        }

        .search-box {
            margin-bottom: 15px;
        }

        .toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>
<body class="childrenBody">
<div class="layui-fluid">
    <div class="list-header">
        <span class="layui-breadcrumb">
            <a href="/">工作台</a>
            <a><cite>我的报销</cite></a>
        </span>
    </div>

    <!-- 工具栏 -->
    <div class="toolbar">
        <button class="layui-btn" id="addExpense">
            <i class="layui-icon layui-icon-add-1"></i>新增报销
        </button>
        <div class="search-box">
        </div>
    </div>

    <!-- 数据表格 -->
    <table id="expenseList" lay-filter="expenseList"></table>

    <!-- 操作列模板 -->
    <script type="text/html" id="expenseAction">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    </script>
</div>

<!-- 表单弹窗 -->
<div style="display: none; padding: 20px" id="expenseFormDiv">
    <form class="layui-form" lay-filter="expenseForm">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">报销类型</label>
            <div class="layui-input-block">
                <select name="type" lay-verify="required">
                    <option value="">请选择</option>
                    <option value="差旅费">差旅费</option>
                    <option value="办公费">办公费</option>
                    <option value="餐费">餐费</option>
                    <option value="交通费">交通费</option>

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">报销时间</label>
            <div class="layui-input-block">
                <input type="text" name="reimbTime" class="layui-input" id="reimbTime" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">金额</label>
            <div class="layui-input-block">
                <input type="number" name="amount" class="layui-input" lay-verify="required|number">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">报销说明</label>
            <div class="layui-input-block">
                <textarea name="description" class="layui-textarea" lay-verify="required"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="temporaryForm">暂存</button>
                <button class="layui-btn" lay-submit lay-filter="submitForm">保存并提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script src="/layui/layui.js"></script>
<script type="text/javascript" th:inline="none">
    layui.use(['table', 'form', 'laydate'], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.$;

        // 初始化日期选择
        laydate.render({elem: '#startDate', type: 'date'});
        laydate.render({elem: '#endDate', type: 'date'});
        laydate.render({elem: '#reimbTime', type: 'datetime'});

        // 初始化表格
        table.render({
            elem: '#expenseList',
            id:'expenseList',
            url: '/expense/list',
            page: true,
            height: 'full-130',
            cols: [[
                {field: 'code', title: '报销编号', width: '20%'},
                {field: 'type', title: '类型', width: '15%'},
                {field: 'amount', title: '金额', width: '15%'},
                {field: 'declarant', title: '报销人', width: '15%'},
                {field: 'reimbTime', title: '报销时间'},
                {fixed: 'right', title: '操作', toolbar: '#expenseAction', width: 220},
            ]]
        });

        // 新增按钮点击事件
        $('#addExpense').click(function () {
            layer.open({
                type: 1,
                title: '新增报销',
                content: $('#expenseFormDiv'),
                area: ['600px', '500px'],
                success: function () {
                    form.val('expenseForm', {
                        id: '', reimbType: '', reimbTime: '', amount: '', description: ''
                    });
                }
            });
        });

        // 表单提交
        form.on('submit(temporaryForm)', function (data) {
            $.ajax({
                url: '/expense/save',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg(res.msg);
                        table.reload('expenseList');
                        layer.closeAll();
                    } else {
                        layer.msg(res.msg || '操作失败');
                    }
                }
            });
            return false;
        });

        // 修改原有搜索功能为：
        form.on('submit(search)', function(data){
            var searchData = data.field;
            // 时间范围校验
            if(searchData.startDate && searchData.endDate && new Date(searchData.startDate) > new Date(searchData.endDate)){
                layer.msg('结束时间不能早于开始时间');
                return false;
            }

            table.reload('expenseList', {
                where: {
                    type: searchData.type,  // 修正参数名
                    startDate: searchData.startDate,
                    endDate: searchData.endDate
                }
            });
            return false;
        });

        // 操作监听
        table.on('tool(expenseList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                layer.open({
                    type: 1,
                    title: '编辑报销',
                    content: $('#expenseFormDiv'),
                    area: ['600px', '500px'],
                    success: function () {
                        form.val('expenseForm', data);
                    }
                });
            } else if (obj.event === 'delete') {
                layer.confirm('确定删除？', function () {
                    $.ajax({
                        url: '/expense/' + data.id + '/delete',
                        type: 'GET',
                        contentType: 'application/json',
                        success: function (res) {
                            if (res.code === 200) {
                                layer.msg(res.msg);
                                table.reload('expenseList');
                            }
                        }
                    });
                });
            }
        });
    });
</script>
</body>
</html>